利用html5实现图片的淡入淡出效果

来源:网络整理作者: 发布时间:2020-12-17 01:33

本文为大家分享了利用html5实现图片的淡入淡出效果的源码，具有一定的参考价值，希望能对大家有所帮助。...

目的：

<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <meta name='apple-mobile-web-app-capable' content='yes' /> <meta name="format-detection" content="telephone=no" /> <meta http-equiv='Content-Type' content='textml;charset=UTF-8' /> <title>移动端</title> <style> *{ padding: 0; margin: 0; } #slideshow{ width: 160px; height: 600px; margin: 0 auto; /*设置在页面水平居中*/ overflow: hidden; position: relative; } #slideshow img{ width: 160px; position: absolute; /*图片采取绝对定位，均位于左上角，重叠在一起*/ top: 0; left: 0; opacity: 0; /*初始不透明度为0，图片都看不见*/ transition: opacity 1s linear; /*--重点--定义一个关于透明度的transition*/ } #slideshow img.active{ opacity: 1; /*有active类的图片不透明度为1，即显示图片*/ } </style> </head> <body> <div id="slideshow">  <img src=https://www.ym97.com/"img/1 (1).jpg" /> <img src=https://www.ym97.com/"img/1 (2).jpg" /> <img src=https://www.ym97.com/"img/1 (3).jpg" /> <img src=https://www.ym97.com/"img/1 (4).jpg" /> <img src=https://www.ym97.com/"img/1 (5).jpg" /> <img src=https://www.ym97.com/"img/1 (6).jpg" /> <img src=https://www.ym97.com/"img/1 (7).jpg" /> <img src=https://www.ym97.com/"img/1 (8).jpg" /> <img src=https://www.ym97.com/"img/1 (9).jpg" /> <img src=https://www.ym97.com/"img/1 (10).jpg" /> <img src=https://www.ym97.com/"img/1 (11).jpg" /> </div> <script> //---------主角：轮播图函数------------- function slideshow() { var slideshow=document.getElementById("slideshow"), imgs=slideshow.getElementsByTagName("img"), //得到图片们 current=0; //current为当前活跃的图片编号 function slideOff() { imgs[current].className=""; //图片淡出 } function slideOn() { imgs[current].className="active"; //图片淡入 } function changeSlide() { //切换图片的函数 slideOff(); current++; //自增1 if(current>=imgs.length) current=0; slideOn(); } //每2s调用changeSlide函数进行图片轮播 var slideon=setInterval(changeSlide,2000); slideshow.onmouseover=function () { clearInterval(slideon); //当鼠标移入时清除轮播事件 } slideshow.onmouseout=function () { slideon=setInterval(changeSlide,1500); //当鼠标移出时重新开始轮播事件 } } slideshow(); </script> </body> </html>

相关热词： HTML HTML5

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/4673.shtml

上一篇：利用html5实现简单的拖动功

下一篇：了解浏览器中的不同存储

这里就是吐槽的IE6！）图片来	微软IE9平台预览版完整支持H
IE9正式版无论从性能提升还是	HTML5 学习总结（四）canvas绘图
canvas与html5实现视频截图成果	html5 canvas常用api总结(二)画图
false)}//简化 document.getElementBy	可以加我的HTML5前端交流群11
HTML5生拖放实例分析	html中图片怎么居中对齐？
HTML5 和 Flash 区别？	你有认真学习HTML5吗？那么你应
css怎么让图片向左移动	Canvas跨域的解决方案介绍
canvas实现图片涂鸦功能（附代	用canvas实现简单的下雪效果（